
<template>
	<view class="bargain-list" :class="'bg-'+theme.backgroundColor">
		<cu-custom :isBack="true" :bgColor="showBg?'bg-'+theme.backgroundColor:''">
			<block slot="backText">返回</block>
			<block slot="content">新秒杀列表</block>
		</cu-custom>
		<view class="seckill">
			<image class="seckill-image" src="https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/bg-sck.png"></image>
			<scroll-view scroll-x class="nav text-center padding-left padding-right seckill-time" scroll-with-animation :scroll-left="scrollLeft">
				<view class="navItem flex-sub" :class="index==TabCur?'text-white ':''" v-for="(item,index) in seckillList" :key="index"
					  @tap="tabSelect($event,item)" :data-id="index">
					<view class="text-sm">{{item.hallTime+':00'}}</view>
					<view v-if="index==TabCur" class="cu-tag bg-white sm round text-red text-sm">
						{{curHour==item.hallTime?'正在疯抢':curHour>item.hallTime?'已结束':'即将开始'}}
					</view>
					<view v-else class="text-white text-xs">{{curHour==item.hallTime?'正在疯抢':curHour>item.hallTime?'已结束':'即将开始'}}</view>
				</view>
			</scroll-view>
			<view class="cu-bar justify-center ">
				<view class="text-sm">
					<text class="line margin-right-xs"></text>
					<text v-if="outTime>0">本场还剩:</text><count-down  v-if="outTime>0" :outTime="outTime" :textColor="'white'" @countDownDone="countDownDone"></count-down><text v-show="outTime>0">结束</text>
					<text v-show="outTime==0">本场已结束</text>
					<text v-show="outTime<0">本场暂未开始</text>
					<text class="line margin-left-xs"></text>
				</view>
			</view>
			<view class="article no-card">
				<view class="goods-item margin-top padding-bottom" v-for="(item, index) in listSeckillGoodsInfo" :key="index">
					<view @click="shopidMethod(item.shopInfo.id)">
					<navigator class="padding-lr padding-top" hover-class="none" :url="'/pages/shop/shop-detail/index?id=' + item.shopInfo.id">
						<view class="cu-avatar sm radius" :style="'background-image:url(' + item.shopInfo.imgUrl + ')'"></view>
						<text class="text-black margin-left-sm">{{item.shopInfo.name}}</text>
						<text class="cuIcon-right text-sm"></text>
					</navigator>
					</view>
					<view class="flex padding-xs padding-bottom align-center padding-top">
						<image :src="item.seckillInfo.picUrl" mode="aspectFill" class="row-img margin-left-sm"></image>
						<view class="margin-left-sm seckill-information">
							<view class="text-black text-sm overflow-2 padding-right-sm">{{item.seckillInfo.name}}</view>
							<view class="flex justify-start margin-top-sm align-center">
								<view class="cu-capsule round">
									<view class='cu-tag bg-red text-sm'>秒杀价</view>
									<view class="cu-tag line-red text-price text-bold text-df text-red padding-left-xs">{{item.seckillInfo.seckillPrice}}</view>
								</view>
								<view class="text-price text-decorat text-gray margin-left-sm">{{item.seckillInfo.goodsSku.salesPrice}}</view>
							</view>
							<view class="regmen margin-top-sm padding-right">
								<view class="text-xs text-gray">限量 {{item.seckillInfo.limitNum}} 件，已售 {{item.seckillInfo.seckillNum}} 件</view>
								<view class="cu-progress round margin-top-sm progress-bar">
									<view class="bg-red" :style="'width:'+item.seckillInfo.progress+'%'">
										<text class="margin-left percentage">{{item.seckillInfo.progress}}%</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-center margin-top-sm">
						<navigator class="cu-btn round shadow-blur btn-enter" :class="'bg-'+theme.themeColor" hover-class="none"
								   :url="'/pages_grid/pages/seckill/seckill-detail/index?seckillHallInfoId=' + item.seckillHallInfoId + '&shopId=' + item.shopId">
							{{curHour==curSeckillHall.hallTime?'马上去抢':'查看详情'}}
						</navigator>
					</view>
				</view>
			</view>
			<view :class="'cu-load ' + (loadmore?'loading':'over') + ' bg-'+theme.backgroundColor"></view>
		</view>
	</view>
</template>

<script>

	const util = require("utils/util.js");
	const app = getApp();
	import api from '@/utils/api';
	import countDown from "@/components/count-down/index";

	export default {
		components:{
			countDown
		},
		watch:{
			curHour(){}
		},
		data() {
			return {
				showBg: false, //是否显示背景色
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				page: {
					searchCount: false,
					current: 1,
					size: 10,
					//升序字段
					descs: ''
				},
				parameter: {},
				loadmore: true,
				listSeckillGoodsInfo: [],//当前时间场次的秒杀商品集合
				seckillList: [],
				curSeckillHall: {//当前会场

				},
				outTime: -1,
				TabCur: 0,
				scrollLeft: 0,
				color: 'red',
				loading: false,
				modalName: '',
				active: false,
				curHour: 0 //当前小时
			};
		},

		props: {},

		//页面滑动 监听事件
		onPageScroll(e){
			if (e.scrollTop > 20) {
				this.showBg = true;
			} else {
				this.showBg = false;
			}
		},
		onShow() {},

		onLoad: function(options) {
			console.log(options)
			if(options.id){
				this.parameter.seckillInfoId = options.id
			}
			this.curHour = this.$moment().format("H");
			app.initPage().then(res => {
				this.seckillhallList();
			});
			let that = this;
			setTimeout(function() {
				that.loading = true
			}, 500)
		},

		onReachBottom() {
			if (this.loadmore) {
				this.page.current = this.page.current + 1;
				this.seckillhallList();
			}
		},

		onPullDownRefresh() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			this.refresh(); // 隐藏导航栏加载框

			uni.hideNavigationBarLoading(); // 停止下拉动作

			uni.stopPullDownRefresh();
		},

		methods: {
			shopidMethod(id){
				uni.$emit('aaa',id)
			},
			countDownDone() {
				this.seckillhallList();
			},
			seckillhallList() {
				let curDate = this.$moment().format("YYYY-MM-DD");
				// let curDate = '2020-09-11';
				let that = this;
				api.seckillhallList(curDate).then(res => {
					let seckillList = res.data;
					this.loadmore = false;
					if(seckillList&&seckillList.length>0){
						let hasSeckill = false;
						this.seckillList = seckillList;
						seckillList.forEach((item,index)=>{
							if(item.hallTime==that.curHour){//默认设置当前小时的秒杀时间，如果没有就设置最近时间的秒杀时间
								this.curSeckillHall = item;
								this.TabCur = index;
								this.scrollLeft = index * 60;
								hasSeckill = true;
								this.getSeckillGoodsData(item.id);
								return;
							}else if(!hasSeckill&&item.hallTime>that.curHour){//秒杀时间必须大于当前时间
								this.curSeckillHall = item;
								this.TabCur = index;
								this.scrollLeft = index * 60;
								hasSeckill = true;
								this.getSeckillGoodsData(item.id);
								return;
							}
						})
						if(!hasSeckill){
							this.curSeckillHall = seckillList[0];
							this.getSeckillGoodsData(this.curSeckillHall.id);
						}
						this.setCountDown();
					}else{
						this.seckillList = [];
					}
				});
			},
			setCountDown(){
				// 设置倒计时时间，
				// 如果当前时间大于会场时间，结束
				// 如果当前时间等于，正在进行中
				// 如果小于暂未开始
				if(this.curSeckillHall.hallTime<this.curHour){
					this.outTime = 0;
				}else if(this.curSeckillHall.hallTime==this.curHour){//计算倒计时多少秒
					let curDateTime = new Date().getTime();//当前时间
					let nextHour = Number(this.curHour) + 1;
					let nextDateTime = this.curSeckillHall.hallDate + ' ' + nextHour + ':00:00';
					let timeTemp = this.$moment(nextDateTime).toDate();
					this.outTime = new Date(timeTemp).getTime() - curDateTime;//下一个整点时间
				}else{
					this.outTime=-1;
				}
			},
			tabSelect(e,item) {
				this.curHour = this.$moment().format("H");
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.listSeckillGoodsInfo = [];
				if(item){
					item.listSeckillInfo = item.listSeckillInfo? item.listSeckillInfo:[];
					this.curSeckillHall = item;
					this.getSeckillGoodsData(item.id);
				}else{
					this.curSeckillHall = {
						listSeckillInfo: [],
						outTime:0
					};
				}
				this.setCountDown();
			},
			getSeckillGoodsData(id){
				api.seckillshopPage(Object.assign({seckillId:id}, this.page, util.filterForm(this.parameter))).then(res => {
					console.log(res)
					let listSeckillGoodsInfo = res.data.records;
					listSeckillGoodsInfo.forEach((item,index)=>{
						item.seckillInfo.progress = (item.seckillInfo.seckillNum/item.seckillInfo.limitNum).toFixed(2)*100

					})

					this.listSeckillGoodsInfo = [...this.listSeckillGoodsInfo, ...listSeckillGoodsInfo];
					if (listSeckillGoodsInfo.length < this.page.size) {
						this.loadmore = false;
					}
				});
			},
			refresh() {
				this.loadmore = true;
				this.seckillList = [];
				this.listSeckillGoodsInfo = [];
				this.page.current = 1;
				this.seckillhallList();
			}

		}
	};
</script>
<style>
	.navItem{
		display: inline-block;
		line-height: 30rpx;
		margin: 0 10rpx;
		padding: 0 20rpx;
	}
	
	.seckill-time{
		min-height: 50px;
		margin-top: -220rpx;
	}
	
	.row-img {
		width: 200rpx !important;
		height: 200rpx !important;
		border-radius: 10rpx;
	}

	.seckill{
		min-height: 1450rpx;
	}

	.line{
		display:inline-block;
		width:120rpx;
		border-top:0.5rpx solid #cccccc;
		vertical-align:5px;
		opacity: 0.5;
	}

	.goods-item{
		background-color: #FFFFFF;
		width: 94%;
		margin: auto;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
	}

	.seckill-information{
		width: 460rpx;
	}

	.seckill-image{
		width: 100%;
		height: 683rpx;
		margin-top: -120rpx;
	}

	.progress-bar{
		height: 16rpx;
	}

	.percentage{
		color: #ffb04a!important;
	}

	.btn-enter{
		width: 580rpx;
		height: 76rpx;
	}
</style>
